<template>
  <div>
    <h1>我的贷款</h1>
    <!---搜索表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input
                  v-model="form.lname"
                  style="width: 100%"
                  placeholder="用户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="To"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysUser">
            搜索
          </el-button>
          <el-button size="small" type="success" @click="resetData">重置</el-button>
          <el-button size="small" type="success" @click="RepaidLoans">已还款</el-button>
          <el-button size="small" type="success" @click="overdueLoan">逾期款</el-button>
        </el-row>
      </el-form>
    </div>
        <el-table :data="findLoan" style="width: 100%">
          <el-table-column prop="realName" label="用户姓名" />
<!--          <el-table-column prop="phone" label="手机号" />-->
<!--          <el-table-column prop="lname" label="名称" />-->
<!--          <el-table-column prop="idCard" label="身份证号" />-->
          <el-table-column prop="lname" label="所贷款项" />
          <el-table-column prop="remark" label="图标" #default="scope">
            <img :src="scope.row.remark" width="50" />
          </el-table-column>
          <el-table-column prop="amount" label="所贷款金额" />
          <el-table-column prop="redundancy1" label="实际还款金额" />
          <el-table-column prop="rate" label="利率" />
          <el-table-column prop="createTime" label="贷款日期" />
          <el-table-column prop="requiredate" label="还款日期" />
          <el-table-column prop="backDate" label="实际还款日期" />
          <el-table-column prop="redundancy2" label="逾期金额"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template v-slot="scope">
              <el-tag v-if="scope.row.state === 0" type="success">已还款</el-tag>
              <el-tag v-if="scope.row.state === 1" type="danger">未还</el-tag>
              <el-tag v-if="scope.row.state === 2" type="warning">逾期</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200" #default="scope">
            <el-button
              type="primary"
              v-show="scope.row.state != 0"
              @click="repayment(scope.row)"
            >
              还款
            </el-button>
          </el-table-column>
        </el-table>
    <el-pagination
        v-model:current-page="pageParams.page"
        v-model:page-size="pageParams.limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>

//重置
import {onMounted, ref} from "vue";
import {getFindLoan, getLoan, updateLoan} from "@/api/loan";
import {ElMessage} from "element-plus";


//逾期款
const overdueLoan = () =>{
  form.value.state=2
  form.value.uid=localStorage.getItem('id')
  fetchData(pageParams.value.page,pageParams.value.limit,form.value)
}

//还款

const loanForm = {
  rate: '',
  repaymentdate: '',
  uid: '',
  lid: '',
  lname: '',
  remark: '',
  loanlimit: '',
  id:'',
}
const loanUserForm = ref(loanForm)

//还款
const repayment = async row => {
  console.log(row)
  loanUserForm.value.uid=localStorage.getItem("id")
  loanUserForm.value.loanlimit=row.redundancy1
  loanUserForm.value.id=row.id
  // alert(row.redundancy1)
  // alert(row.id)
  const { code, message } = await updateLoan(loanUserForm.value)
  if (code === 200) {
    ElMessage.success(message)
    fetchData(pageParams.value.page,pageParams.value.limit,form.value)
  } else {
    ElMessage.error(message)
  }
}


//已还款
const RepaidLoans = () =>{
  form.value.state=0
  form.value.uid=localStorage.getItem('id')
  fetchData(pageParams.value.page,pageParams.value.limit,form.value)
}

const resetData = () => {
  form.value.lname=''
  form.value.createTimeBegin=''
  form.value.createTimeEnd=''
  fetchData()
}

const findLoan =ref([])

//搜索方法
const searchSysUser = () => {
  fetchData(
      pageParams.value.page,
      pageParams.value.limit,
      form.value
  )
}

//开始和结束时间数据模型
const createTimes = ref([])

// 分页条数据模型
const total = ref(0)

//分页条数据模型
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 钩子函数
onMounted(() => {
  fetchData()
})

const queryDto = {
  lname: '',
  createTimeBegin: '',
  createTimeEnd: '',
  uid:'',
  state:1
}
const form = ref(queryDto)

// 分页查询
const fetchData = async () => {
  //获取开始和结束时间
  if (createTimes.value.length == 2) {
    form.value.createTimeBegin = createTimes.value[0]
    form.value.createTimeEnd = createTimes.value[1]
  }
  let item = localStorage.getItem('id')
  console.log(item)
  form.value.uid=item
  const { data } = await getFindLoan(pageParams.value.page,pageParams.value.limit,form.value)
  findLoan.value = data
  findLoan.value = data.records
  total.value = data.total
}


</script>

<style scoped>

</style>
